<template>
  <el-dialog :visible.sync="dialogVisible" title="分析预览" width="80%" append-to-body destroy-on-close>
    <div style="padding-bottom: 10px">
      <el-button type="primary" @click="getPdf">下载</el-button>
    </div>
    <div id="pdf" ref="print" class="print_pdf">
      <div class="show-box">
        <div style="padding: 24px 24px 0;">
          <el-card shadow="hover">
            <el-col :span="10">
              <el-row gutter="20" style="padding-top: 24px">
                <el-col :span="16">
                  <WeldUserAvatar :avatar="userData.avatar"/>
                </el-col>
                <el-col :span="8">
                  <WClassification :classification="userData.classification"/>
                </el-col>
              </el-row>
              <WProcess :userData="userData"/>
              <UserData :userData="userData"/>
            </el-col>
            <el-col :span="14">
              <WeldRaddar v-if="dialogVisible" :userName="userData.userName"/>
            </el-col>
          </el-card>
        </div>
        <PartClass :userName="userData.userName" :total="userData.total"/>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import { retainChineseCharacters } from '@/utils/ruoyi'
import PartClass from "@/views/quality/common/weldComponents/PartClass.vue";
import UserData from "@/views/quality/common/weldComponents/UserData.vue";
import WeldRaddar from "@/views/quality/common/weldComponents/WeldRaddar.vue";
import defaultPrint from "@/utils/defaultPrint";
import WProcess from "@/views/quality/common/weldComponents/WProcess.vue";
import WeldUserAvatar from "@/views/quality/common/weldComponents/WeldUserAvatar.vue";
import WClassification from "@/views/quality/common/weldComponents/WClassification.vue";

export default {
  name: 'WelderCard',
  dicts: ['sys_user_company', 'sys_user_class', 'dept_abbreviation'],
  components: {WClassification, WeldUserAvatar, WProcess, WeldRaddar, UserData, PartClass },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    user:{
      type:Object,
      default:{}
    },
  },
  data() {
    return {
      userData:{},
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        itemsId: null,
        userId: null,
      },
    }
  },
  methods: {
    getPdf(){
      this.$modal.msgSuccess("即将开始下载文件，请稍等");
      let dom = this.$refs.print;
      const title = this.userData.nickName + this.userData.userName + "-分级卡片";
      defaultPrint( dom, title )
    },
    cancel() {
      this.dialogVisiable = false;
      this.userData = {};
    },
    setUserData() {
      this.userData = {
        ...this.user,
        nickName: retainChineseCharacters(this.user.nickName),
        avatar: this.user.avatar ? `${process.env.VUE_APP_BASE_API}${this.user.avatar}` : null
      };
    },
    resetUserData() {
      this.userData.avatar = '';
    }
  },
  watch: {
    dialogVisible(newVal) {
      if (newVal) {
        this.setUserData();
      } else {
        this.resetUserData();
      }
    },
    immediate: true
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit('update:visible', val);
      }
    }
  }
}
</script>

<style scoped>
.show-box {
  background-image: url("~@/assets/images/20231018g3797n.webp");
  background-size: cover;
}
</style>
